<template>
  <div>
      <!-- inline代表的是行内表单，代表一行可以放置多个表单元素 -->
    <el-form :inline="true" class="demo-form-inline" :model="Id">
      <el-form-item label="一级分类">
          <!-- handler1是自定义事件 -->
        <el-select placeholder="请选择" v-model="Id.Id1" @change="handler1" :disabled="show">
          <el-option :label="c1.name" :value="c1.id" v-for="c1 in list1" :key="c1.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <el-select placeholder="请选择" v-model="Id.Id2" @change="handler2" :disabled="show">
          <el-option :label="c2.name" :value="c2.id" v-for="c2 in list2" :key="c2.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select placeholder="请选择" v-model="Id.Id3" @change="handler3" :disabled="show">
          <el-option  :label="c3.name" :value="c3.id" v-for="c3 in list3" :key="c3.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "CategorySelect",
  props:['show'],
  data() {
    return {
        list1:[],//一级分类数据
        list2:[],//二级分类数据
        list3:[],//三级分类数据、/
        // 收集相应的一级二级三级分类的id
        Id:{Id1:'',Id2:'',Id3:''}
    };
  },
  mounted() {
    // 获取一级分类的数据
    this.getCategory1List();
  },
  methods: {
      async getCategory1List() {
          let result = await this.$API.attr.reqCategory1List();
          console.log(result,'三级联动的一级分类数据');
          if(result.code==200) {
              this.list1=result.data;
          }
      },
    // 一级分类select的事件回调，当一级分类的option发生变化时获取相应二级分类的数据
      async handler1() {
          this.Id.Id2='';
          this.Id.Id3='';
          this.list2=[];
          this.list3=[];
          this.$emit('getCategoryId',{categoryId:this.Id.Id1,level:1});
          let result = await this.$API.attr.reqCategory2List(this.Id.Id1); 
          console.log(result,'三级联动的二级分类数据');
          if(result.code==200) {
              this.list2=result.data;
          }
      },
      // 二级分类select的事件回调，当二级分类的option发生变化时获取相应三级分类的数据
      async handler2() {
          this.Id.Id3='';
          this.list3=[];
          this.$emit('getCategoryId',{categoryId:this.Id.Id2,level:2});
          let result = await this.$API.attr.reqCategory3List(this.Id.Id2); 
          console.log(result,'三级联动的三级分类数据');
          if(result.code==200) {
              this.list3=result.data;
          }
      },
      // 三级分类select的事件回调
      handler3() {
          this.$emit('getCategoryId',{categoryId:this.Id.Id3,level:3});
      }
  },
};
</script>

<style>
</style>